---
type: tutorial
unitTitle: 첫 번째 Astro 사이트 생성 및 배포
title: '시작 전 확인: 1단계 - 설정하기'
description: '튜토리얼: 처음 만드는 Astro 블로그 — 개발 환경 준비, 첫 Astro 사이트 제작 및 배포'
i18nReady: true
head:
  - tag: title
    content: '블로그 만들기 튜토리얼: 단계 1 - 설정하기 | Docs'
---
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import { Steps } from '@astrojs/starlight/components';

이제 무엇을 만들지 알았으니, 필요한 모든 도구를 설정할 차례입니다!

이 단계에서는 개발 환경을 설정하고 Netlify에 배포하는 방법을 안내합니다. 이미 환경과 작업 흐름에 익숙하다면 [2단계](/ko/tutorial/2-pages/)로 건너뛰세요.

:::tip[온라인 코드 편집기에서 튜토리얼 진행]

온라인 코드 편집기에서 이 튜토리얼을 완료하고 싶나요? 아래 지침에 따라 Google IDX에서 시작하세요.

<details>
<summary>Google IDX 사용하기: 이 안내를 따른 후, 바로 2단계로 이동하세요!</summary>

**IDX 설정**

<Steps>
1. [IDX의 새 작업 공간에서 "Empty Project" 템플릿을 실행하기 위해](https://astro.new/minimal?on=idx) 외부 링크를 따라가세요.

2. 아직 로그인하지 않았다면 안내에 따라 Google 계정에 로그인하세요.

3. 기본 이름인 "Empty Project"에서 변경하고 싶다면 프로젝트 이름을 입력하세요. **Create**를 클릭하세요.

4. 작업 공간이 생성될 때까지 기다리세요. 30 ~ 60초 정도 걸릴 수 있습니다. 모든 과정이 순조롭게 진행되면 온라인 코드 편집기에 Astro 프로젝트가 로드된 것을 확인할 수 있습니다.

5. IDX가 두 스크립트를 실행할 때까지 기다리세요. 하나는 Astro를 설치하는 스크립트이며, 다른 하나는 개발 서버를 시작하는 스크립트입니다. Astro가 설치되기 전에 작업 공간이 로드되면 "couldn't find Astro"라는 메시지가 잠시 나타날 수 있습니다. 이 메시지가 자동으로 사라지지 않으면 무시하고 취소해도 됩니다.
</Steps>

**코드 변경**

모든 과정이 순조롭게 진행되면 웹사이트의 실시간 미리보기와 `src/pages/index.astro` 파일의 코드가 분할 화면으로 함께 실행되는 것을 확인할 수 있습니다. ["첫 번째 Astro 코드 작성하기"](/ko/tutorial/1-setup/3/)의 안내에 따라 이 파일을 수정해 보세요.

**Github 리포지토리 생성**

<Steps>
1. 세로 메뉴 바에서 "Source Control" 탐색 항목으로 이동하거나, <kbd>CTRL + SHIFT + G</kbd> 키를 눌러 메뉴를 여세요.

2. GitHub에 게시하기 위한 옵션을 선택하세요. 그러면 GitHub 계정에 새 리포지토리가 생성됩니다.
3. 안내에 따라 GitHub 계정에 로그인하세요.
4. 로그인 후, IDX 탭으로 돌아가 새 리포지토리의 이름을 지정하고, 비공개 또는 공개 리포지토리 여부를 선택할 수 있습니다. 이 튜토리얼에서는 원하는 이름과 유형의 리포지토리를 선택할 수 있습니다.
5. IDX는 첫 커밋을 생성하고, 프로젝트를 새 Github 리포지토리에 게시할 것입니다.
6. 앞으로는 GitHub에 커밋할 변경 사항이 있을 때마다 Source Control 탐색 아이콘에 숫자가 표시됩니다. 이 숫자는 마지막 커밋 이후 변경된 파일의 개수입니다. 이 탭으로 이동하여 커밋과 게시를 수행하면 커밋 메시지를 입력하고 리포지토리를 업데이트할 수 있습니다.
</Steps>

**사이트 배포**

개발하는 동안 Netlify에 배포하여 실시간 게시 버전의 사이트를 확인하고 싶다면, 1단계의 [사이트를 웹에 배포하기](/ko/tutorial/1-setup/5/)를 확인하세요.

그렇지 않다면, [2단계](/ko/tutorial/2-pages/)로 건너뛰어 Astro를 사용해 빌드를 시작하세요.

</details>

{/* StackBlitz instructions 
<details>
<summary>StackBlitz 사용: 다음 지침을 따른 다음 바로 2단계로 이동하세요!</summary>

**StackBlitz 설정**

<Steps>
1. [StackBlitz에서 "Empty Project" 템플릿 열기](https://astro.new/minimal?on=stackblitz)를 위해 외부 링크를 따라가세요.

2. GitHub 자격 증명을 사용하여 로그인하려면 오른쪽 상단의 "Sign in"을 클릭하세요.

3. StackBlitz 편집기 창의 왼쪽 상단에서 템플릿을 "fork"하려면 클릭하세요 (자신의 계정 대시보드에 저장).

4. 프로젝트가 로드될 때까지 기다리면 "Empty Project" 스타터의 실시간 미리보기가 표시됩니다.
</Steps>

**변경**

파일 창에 `src/pages/index.astro`가 표시되어야 합니다. 클릭하여 열고 [첫 번째 Astro 코드 작성하기](/ko/tutorial/1-setup/3/)을 따라 이 파일을 변경합니다.

**GitHub 저장소 생성**

<Steps>
1. 파일 목록 상단의 <kbd>Connect Repository</kbd> 버튼을 누르고 저장소의 새 이름을 입력한 후 <kbd>Create repo & push</kbd>를 클릭하세요.

2. GitHub에 다시 커밋할 변경 사항이 있으면 작업 공간 왼쪽 상단에 "Commit" 버튼이 나타납니다. 이를 클릭하면 커밋 메시지를 입력하고 저장소를 업데이트할 수 있습니다.
</Steps>

**사이트 배포**

작업하는 동안 사이트의 라이브 게시 버전을 Netlify에 배포하고 싶다면, 1단원의 [웹에 사이트 배포하기](/ko/tutorial/1-setup/5/)를 진행하세요.

그렇지 않으면 [2단계](/ko/tutorial/2-pages/)로 건너뛰어 Astro로 구축을 시작하세요!

</details>
*/}
:::

## 어떻게 진행되나요?

이 단계에서는 **GitHub에 온라인으로 저장**되고 **Netlify에 연결**되는 **새 프로젝트를 만듭니다**.

코드를 작성하면서 주기적으로 변경 사항을 GitHub에 커밋하게 됩니다. Netlify는 GitHub 리포지토리의 파일을 사용하여 웹사이트를 빌드한 후, 누구나 볼 수 있는 고유한 주소로 인터넷에 게시합니다.

GitHub에 변경 사항을 커밋할 때마다 Netlify로 알림이 전송됩니다. 그러면 Netlify는 해당 변경 사항을 반영하기 위해 게시된 사이트를 다시 빌드하고 게시합니다.

<Box icon="check-list">
## 체크리스트

<Checklist>
- [ ] Astro 프로젝트를 위한 개발 환경이 준비되었습니다!
</Checklist>
</Box>
